<template>
  <div class="home">
    <div class="home-tile">
      <span class="title">智晨智慧管理平台</span>
  </div>
      <div id="grad1"></div>
    <div class="nav">
        <div class="menu"  v-bind:class="{ menucheck: isoneActive }" v-if="isoneshow"><a @click="checkitem(0)">车辆管理</a><Icon type="md-close" class="delete" @click="deleteitem(0)"/></div>
        <div class="menu"  v-bind:class="{ menucheck: istwoActive }" v-if="istwoshow"><a @click="checkitem(1)">人脸管理</a><Icon type="md-close" class="delete" @click="deleteitem(1)"/></div>
        <div class="menu"  v-bind:class="{ menucheck: isthreeActive }" v-if="isthreeshow"><a @click="checkitem(2)">访客管理</a><Icon type="md-close" class="delete" @click="deleteitem(2)"/></div>
        <div class="menu"  v-bind:class="{ menucheck: isfourActive }" v-if="isfourshow"><a @click="checkitem(3)">RFID管理</a><Icon type="md-close" class="delete" @click="deleteitem(3)"/></div>
        <div class="menu"  v-bind:class="{ menucheck: isfiveActive }" v-if="isfiveshow"><a @click="checkitem(4)">基础管理</a><Icon type="md-close" class="delete" @click="deleteitem(4)"/></div>

        <div class="menu" ><a @click="openSurl('http://10.0.0.50:9002/its2/vehicle/trackedVehicleRecordList.jsp')" >车辆布控</a><Icon type="md-close" class="delete" @click="deleteitem(4)"/></div>
        <div class="menu" ><a @click="openSurl('http://10.0.0.50:9002/its2/vehicle/recordList.jsp')">布控警告</a><Icon type="md-close" class="delete" @click="deleteitem(4)"/></div>
        <div class="menu" ><a @click="openSurl('http://10.0.0.50:9002/its2/vehicle/vehicleAlarmPreciseList.jsp')">过车</a><Icon type="md-close" class="delete" @click="deleteitem(4)"/></div>
        <div class="menu" ><a @click="openSurl('http://10.0.0.50:9002/yth/main/area/lqcu/cloudPeoplealarmList.jsp')">人脸</a><Icon type="md-close" class="delete" @click="deleteitem(4)"/></div>
    </div>
      <div class="compents">
          <carmanage v-if="isoneActive"></carmanage>
          <facemanage v-if="istwoActive"></facemanage>
          <visitormanage v-if="isthreeActive"></visitormanage>
          <rfidmanage v-if="isfourActive"></rfidmanage>
          <mastermanage v-if="isfiveActive"></mastermanage>
      </div>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import carmanage from '@/components/carmanage.vue'
import facemanage from '@/components/facemanage.vue'
import visitormanage from '@/components/visitormanage.vue'
import rfidmanage from '@/components/rfidmanage.vue'
import mastermanage from '@/components/mastermanage.vue'

export default {
  name: 'home',
  components: {
      carmanage,facemanage,visitormanage,rfidmanage,mastermanage
  },
  data () {
    return {
        tab0: true,
        tab1: true,
        tab2: true,
        isoneActive:true,
        istwoActive:false,
        isthreeActive:false,
        isfourActive:false,
        isfiveActive:false,
        isoneshow:true,
        istwoshow:true,
        isthreeshow:true,
        isfourshow:true,
        isfiveshow:true,
    }
  },
  computed: {
  },
  methods: {
    handleTabRemove (name) {
        this['tab' + name] = false;
    },
    checkitem(index){
    // if(typeof(str) === 'string')
        index = parseInt(index)
      if(index === 0){
        this.isoneActive=true
        this.istwoActive=false
        this.isthreeActive=false
        this.isfourActive=false
        this.isfiveActive=false
      }
      else if(index === 1){
          this.isoneActive=false
          this.istwoActive=true
          this.isthreeActive=false
          this.isfourActive=false
          this.isfiveActive=false
      }
      else if(index === 2){
          this.isoneActive=false
          this.istwoActive=false
          this.isthreeActive=true
          this.isfourActive=false
          this.isfiveActive=false
      }
      else if(index === 3){
          this.isoneActive=false
          this.istwoActive=false
          this.isthreeActive=false
          this.isfourActive=true
          this.isfiveActive=false
      }
      else if(index === 4){
          this.isoneActive=false
          this.istwoActive=false
          this.isthreeActive=false
          this.isfourActive=false
          this.isfiveActive=true
      }
    },
    deleteitem(index){
        if(index === 0){
            this.isoneshow=false
        }
        else if(index === 1){
            this.istwoshow=false
        }
        else if(index === 2){
            this.isthreeshow=false
        }
        else if(index === 3){
            this.isfourshow=false
        }
        else if(index === 4){
            this.isfiveshow=false
        }
    },
      openSurl(url){
          window.open(url,'_blank') // 新窗口打开外链接
      }
  },
    mounted(){
        //初始化一些数据
        console.log(this.$route.params.index)
        this.checkitem(this.$route.params.index)
    },
    props:['index'],
}
</script>
<style lang="less" scoped>
    @import '../assets/less/uiless.less';
.home{
    .homeui();
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-basis: 0;
    background: url('../assets/img/mainbg.png') no-repeat;
    background-size:100% 100%;
    overflow: auto;
}
.home-tile{
  height: 5vh;
  display: flex;
  box-sizing: border-box;
  margin: 1vh 1.5vw;
  align-items: center;
  .title{
    font-size:1.2rem;
    font-family:FZZYJW--GB1-0;
    font-weight:bold;
    color:rgba(255,255,255,1) ;
    line-height:29px;
  }
}
#grad1 {
    width: 100vw;
    height: .1vh;
    background: -webkit-linear-gradient(left, #3893ff00,#3893ffff,#3893ff00); /* Safari 5.1 - 6.0 */
    background: linear-gradient(to right,#3893ff00, #3893ffff,#3893ff00); /* 标准的语法（必须放在最后） */
  }
.nav{
  display: flex;
  align-items: center;
  padding-top: 1vh;
  height: 7.5vh;
  .menu{
    width: 120px;
    height: 30px;
    color: white;
    background: url('../assets/img/tabnor.png') no-repeat;
    background-size: convert;
    box-sizing: content-box;
    font-size:12px;
    font-family:PingFangSC-Medium;
    font-weight:500;
    color:rgba(255,255,255,0.5);
    line-height: 30px;
    position: relative;
    margin-left: 5px;
  }
  .menucheck{
    background: url('../assets/img/tabcheck.png') no-repeat;
    background-size: convert;
    color:rgba(255,255,255,1);
  }
  .delete{
    margin-left: 15px;
  }
}
.compents{
    flex-grow: 1;
    box-sizing: border-box;
}
</style>

